<template>
    <el-table :data="tableData">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <template v-for="item in tableHeader">
            <table-column
                v-if="item.children && item.children.length"
                :key="item.id"
                :coloumn-header="item"
            ></table-column>
            <el-table-column
                v-else
                :key="item.id"
                :label="item.label"
                :prop="item.prop"
                sortable
            >
            </el-table-column>
        </template>
    </el-table>
</template>
 
<script>
import TableColumn from "./dynamicTable2.vue";
export default {
    components: {
        TableColumn,
    },
    props: {
        // 表格的数据
        tableData: {
            type: Array,
            required: true,
        },
        // 多级表头的数据
        tableHeader: {
            type: Array,
            required: true,
        },
    },
};
</script>
 
<style scoped>
::v-deep .cell{
    text-align: center;
}
</style>